<template name='select_goods'>
	<!-- 选择商品 遮罩层 -->
	<uni-popup ref="goods" type="center" title="选择商品" @change="popupChange">
		<!-- 数据列表 -->
		<view class="box-infos font12  " >
			<view class="content-box font12" >
				<view class="boxsss40" >
					<view class="flex">
						<view class="flex1 m20">
							<!-- 增加、删除 -->
							<view class="top-but menu-scroll-w">
								<view class="top-but-box ">
									<!-- 商品名称-->
									<view class="flex  flex1" >
										<!-- <text selectable="true"  class="justify " >商品名称:</text> -->
										<!-- 搜索 -->
										<view class="searchBox floatleft" style="flex:1">
											<view class="riskTitle">输入商品关键字:</view>
											<input 
											v-model="sousou.goods_value"
											
											placeholder="输入商品关键字"
											placeholder-class="placeholder-class"
											@confirm="$common.noMultipleClicks('GetGoodsSearch',GetGoodsSearch,true)"
											class="search-ipu "
											/>
											<view class="delete-ipu" v-if="sousou.goods_value!=''" @click="sousou.goods_value='',GetGoodsSearch(true)">
												<img src="../../static/img/delete-1.png"  ></img>
											</view>
										</view>
									</view>
									<!-- end -->
									<view
										@click="$common.noMultipleClicks('GetGoodsSearch',GetGoodsSearch,true)" 
										class="rightButttom" 
									>
										<img src="../../static/img/search.png" class="ico"></img>
										刷新
									</view>
								
								</view>
							</view>
							
							<table >
								<!-- 表头 -->
								<thead>
									<tr >
										<th style="min-width: 20px;">
											<checkbox
												border-color="#333333" activeborderColor="#333333" activeBackgroundColor="#333"
												:checked="checkbox.select" 
												@click="choose_all"
												style="transform:scale(0.7);"
											/>序
										</th>
										<th class="centers">待选择的商品</th>
										<th class="centers">库存</th>
										<th class="centers">操作</th>
									</tr>
								</thead>
								<tbody>
									<checkbox-group @change="checkbox_change" style="display: contents;">
										<!-- 内容 -->
										<tr v-for="(item,index) in goodsSearch.list" 
										:key="index"  
										:class="checkbox.checkbox_status.includes(item.id) ? 'goods-list-select':''"
										>
											<td>
												<checkbox
													:value="item.id.toString()" 
													border-color="#333333" activeborderColor="#333333" activeBackgroundColor="#333"
													:checked="checkbox.checkbox_status.includes(item.id)" 
													style="transform:scale(0.7);"
												/>{{index+1}}
											</td>
											<td class="centers" :class="item.isCache ? 'color-e40318':''">
												{{item.name}}
											</td>
											<td class="centers">
												{{item.margin+''+item.units}}
											</td>
											<td class="centers alter" @click="addCacheGoodsList(item)">
												增加
											</td>
											
										</tr>
									
									</checkbox-group>
								</tbody>
							</table>
							
							<!-- 暂无数据 -->
							<empty v-if="goodsSearch.list==undefined || goodsSearch.list.length==0"></empty>
							<!-- end -->
							<pages
							:sum="page.sum"
							:current="page.nowPage"
							@updatePage="updatePage"
							></pages>
						</view>
						<view class="flex1 m20">
							<!-- 增加、删除 -->
							<view class="top-but menu-scroll-w">
								<view class="top-but-box ">
									
									<view
									@click="emptyData()" 
									class="mainLeft back_color search-but  " 
									>
										<img src="../../static/img/delete.png" class="ico"></img>
										重置
									</view>
								
									<view
										@click="$common.noMultipleClicks('GetSelectGoodsSearch',GetSelectGoodsSearch,true)" 
										class="rightButttom" 
									>
										确定选择，下一步
									</view>
								</view>
							</view>
							
								<table >
									<!-- 表头 -->
									<thead>
										<tr >
											<th style="min-width: 20px;">
												序
											</th>
											<th class="centers">已添加的商品</th>
											<th class="centers">操作</th>
										</tr>
									</thead>
									<tbody>
											<!-- 内容 -->
											<tr v-for="(item,index) in cacheGoodsList" 
											:key="index"  
											@click="TabcheckedIndex = index"
											:class="TabcheckedIndex == index ? 'goods-list-select':''"
											>
												<td>
													{{index+1}}
												</td>
												<td class="centers">
													{{item.name}}
												</td>
												<td class="centers color-e40318" @click="DeleteCacheGoodsList(index)">
													删除
												</td>
												
											</tr>
									</tbody>
								</table>
								
						</view>		
					</view>
				</view>
				
			
			</view>
			<!-- 数据列表end -->
		</view>
	</uni-popup>
	<!-- end -->
</template>

<script>
	import empty from "@/components/admin-components/empty.vue"

	import pages from "@/components/admin-components/pages.vue"
	import shopping_admin from "@/components/goods/goods.vue"
	export default{
		name:'select_goods',
		components: {
			empty,pages,shopping_admin
		},
		emits: ['change'],
		data(){
			return{
				checkbox:{//多选框
					checkbox_status:[],
					select_all:false,
					select:false,
				},
				sousou:{
					goods_value:'',
				},
				goodsSearch:{
					list:[]
				},
				TabcheckedIndex:-1,//当前选中项
				page:{
					
					nowPage:1,//当前页数
					pageCount:1,//总页数
					maxCount:0,
					sum:0,
					pageCounts:15,
				},
				cacheGoodsList:[]
			}
		},
		 // 此处定义传入的数据
		props: {
			
		},
		mounted(){
		},
		created() {
			
		},
		methods:{
			/**
			 * 回调当前选中的表项
			*/
			checkbox_change(e){
				for (var i=0;i<e.detail.value.length;i++) {
					var id = e.detail.value[i]
					var item = this.GoodsIdGetGoods(id)
					
					if(item!=false){
						this.checkbox.checkbox_status.push(item)
					}
					
				}
				
			},
			/**
			 * 全选中
			*/
			choose_all(){
				
				console.log('console',this.checkbox.checkbox_status)
				this.checkbox.checkbox_status = []
				if(this.checkbox.select_all == false){
					this.checkbox.select_all = true
					this.checkbox.select = true
					for (var i=0;i<this.goodsSearch.list.length;i++) {
						this.checkbox.checkbox_status.push(this.goodsSearch.list[i].id)
					}
				}else{
					this.choos_all_close()
				}
			},
			// 取消全选中
			choos_all_close(){
				this.checkbox.select_all = false
				this.checkbox.checkbox_status = []
				this.checkbox.select = false
			},
		
			GetSelectGoodsSearch(){
				this.$emit('change', {
					data: this.cacheGoodsList,
				})
				this.$refs.goods.close()
			},
			emptyData(){
				this.cacheGoodsList = []
				this.chulihua()
			},
			/**
			 * 关闭弹窗
			*/
			popupChange(res){
				if(res.show == false){
					this.setCacheGoodsList()
				}
				
			},
			/**
			 * 打开弹窗
			*/
			open(){
				this.readCacheGoodsList()
				this.$refs.goods.open()
			},
			/**
			 * 保存缓存的数据
			*/
			setCacheGoodsList(){
				uni.setStorage({
					key: 'cacheGoodsListKey',
					data: this.cacheGoodsList,
					success: function () {
					}
				});
			},
			/**
			 * 检查缓存数据是否包含某个商品
			*/
			checkGoods(goods_id){
				var list = this.cacheGoodsList
				for(var i=0;i<list.length;i++){
					if(list[i].id == goods_id){
						return list[i]
					}
				}
				return false
			},
			/**
			 * 检查缓存数据是否包含某个商品
			*/
			GoodsIdGetGoods(goods_id){
				var list = this.goodsSearch.list
				for(var i=0;i<list.length;i++){
					if(list[i].id == goods_id){
						return list[i]
					}
				}
				return false
			},
			/**
			 * 读取缓存的数据
			*/
			readCacheGoodsList(){
				var list = uni.getStorageSync('cacheGoodsListKey')
				if(list.length>0){
					try {
						JSON.stringify(list);
						this.cacheGoodsList = list
					} catch (e) {
						console.log("失败")
					}
				}
				
			},
			/**
			 * 增加缓存的数据
			*/
			addCacheGoodsList(item){
				if(this.checkGoods(item.id)==false){
					this.cacheGoodsList.push({
						id:item.id,
						name:item.name,
					})
					
					this.chulihua()
				}
			},
			chulihua(){
				var list = this.goodsSearch.list
				for(var i=0;i<list.length;i++){
					list[i].isCache = this.checkGoods(list[i].id)
				}
				this.goodsSearch.list = list
			},
			/**
			 * 删除缓存的数据
			*/
			DeleteCacheGoodsList(index){
				if(index>=0 && index<this.cacheGoodsList.length){
					this.cacheGoodsList.splice(index,1)
					this.chulihua()
				}
			},
			/**
			 * 搜索商品
			*/
			GetGoodsSearch(isUpdatePage=true){
				var that = this
				that.page.nowPage = isUpdatePage == true ? 1:that.page.nowPage;
				this.choos_all_close()
				that.$common.get_request(
					{
						type:'goods_list',
						search:that.sousou.goods_value,//搜索内容
						pages:that.page.nowPage,//当前位于页数
						page_count:that.page.pageCounts,//当前请求页的数量
					},
					(res)=>{
						
						
						that.page.sum  = res.sum
						if(isUpdatePage == true){
						that.page.nowPage  = 1
						}
						
						for(var i=0;i<res.list.length;i++){
							res.list[i].isCache = that.checkGoods(res.list[i].id)
						}
						that.goodsSearch.list = res.list
						
					}
				);
			},
			/**
			 * 分页器回调
			*/
			updatePage(pageName,pageCount){
				var that = this
				that.page.nowPage = pageName
				that.page.pageCounts = pageCount
				that.GetGoodsSearch(false)
			},
		}
	}
</script>

<style>
	.m20{
		margin: 20px;
	}
</style>